<template>
  <div class="hello">
    <form @submit.prevent="submit" ref="form">
      <div class="form">
        <div class="content">
          <div class="form-item">
            <label for="name">姓名：</label>
            <input v-validate="'required'"  class="form-input" :class="{'input-night' : errors.has('userName')}" name="userName" id="name" type="text" v-model="form.name">
            <span class="error" v-show="errors.has('userName')">{{errors.first('userName')}}</span>
          </div>
          <div class="form-item">
            <label for="password">密码：</label>
            <input v-validate="'required'" name="password" class="form-input" id="password" :class="{'input-night' : errors.has('password')}" type="password" v-model="form.passwprd">
            <span class="error" v-show="errors.has('password')">{{errors.first('password')}}</span>
          </div>
          <div class="form-item">
            <label for="email">邮箱：</label>
            <input class="form-input" id="email" type="email" v-model="form.email">
          </div>
          <div class="form-item">
            <label for="sex">性别：</label>
            <input id="sex" type="radio" v-model="form.sex" value="男">男
            <input id="sex" type="radio" v-model="form.sex" value="女">女
          </div>
          <div class="form-item">
            <label for="birthday">出生日期：</label>
            <input class="form-input" id="birthday" type="date" v-model="form.date" pattern="yyyy-MM-dd">
          </div>
          <div class="form-item" style="justify-content: center;">
            <button class="btn" type="submit">提交</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        passwprd: '',
        email: '',
        sex: '',
        date: ''
      },
      errorTag: ''
    }
  },
  watch: {
  },
  methods: {
    submit() {
      
    }
  }
}
</script>
<style scoped>
.error {
  color: red;
  padding-left: 10px;
}

.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;

  width: 800px;
  border: 1px solid #ccc;
  /* 相对定位 */
  position: relative;
  margin: 0 auto;
}

.form-item {
  margin: 10px;
  display: flex;
  justify-content: start;
  position: relative;
}

.form-item label {
  width: 100px;
  text-align: right;
}

.btn {
  background-color: aqua;
  border: none;
  color: white;
  width: 50px;
  height: 30px;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  width: 500px;
  margin-left: 200px;
}

.form-input {
  width: 200px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}
.input-night{
  border: 1px solid red;
  /* 阴影效果 */
  box-shadow: 0 0 5px red;
}
</style>
